<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>字体图标</title>
		<style>
			/* 引入字体图标,并且声明字体图标的样式 */
			@font-face {
				font-family: 'icomoon';
				src: url('fonts/icomoon.eot?8qop0g');
				src: url('fonts/icomoon.eot?8qop0g#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?8qop0g') format('truetype'), url('fonts/icomoon.woff?8qop0g') format('woff'), url('fonts/icomoon.svg?8qop0g#icomoon') format('svg');
				font-weight: normal;
				font-style: normal;
				font-display: block;
			}
			span {
        font-family: 'icomoon';
			}
		</style>
	</head>
	<body>
		<!-- 精灵图的缺点,图片,放大失真,会模糊 
  精灵图再小,图片,也比较大
  字体图标,不会失真,比较小,本质是文字
  -旦字体加载了,就会被渲染出来,减少了服务器的压力
  兼容性也好,浏览器都能够加载
  灵活性,本质是文字,对文字的操作,对字体图标同样生效
  对字,倾斜,加粗,改变大小,改变颜色,加阴影,透明,旋转,对字体图标同样生效
  结构和样式比较简单的时候,推荐使用字体图标
  如果遇到,样式或者是结构复杂,推荐使用精灵图..
  -->
		字体图标<span></span>
	</body>
</html>
